<template>
  <div v-title="'评价管理 - 世外运营云平台'">
    <mk-breadcrumb :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
      <div class="PublicListStyle MkAssessList">
        <mk-search-component :formArr="formArr"  inputPlaceholder = "订单号/商品名称/用户名/手机号" @startSearch="fun_call_search">
        </mk-search-component>
        <div class="primary_bg trHasCursor tabContainer"   v-loading="loadingTab"
             element-loading-text="拼命加载中">
          <el-table
            :data="treatedOrderData.elements"
            style="width: 100%"
            @row-click='showDetail'>
            <el-table-column
              prop="orderNumber"
              label="订单号"
              show-overflow-tooltip
              width="120px">
            </el-table-column>
            <el-table-column
              prop="goodsName"
              width=''
              show-overflow-tooltip
              label="商品名称">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="siteName"
              label="站点">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="shopName"
              label="店铺名称">
            </el-table-column>
            <el-table-column
              width='170px'
              show-overflow-tooltip
              prop="buyer"
              label="用户">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="score"
              label="星级">
            </el-table-column>
            <el-table-column
              width=''
              show-overflow-tooltip
              prop="content"
              label="评价内容">
            </el-table-column>
            <el-table-column
              width='170px'
              show-overflow-tooltip
              prop="evaluateTime"
              :formatter="formatDate"
              label="评价时间">
            </el-table-column>
          </el-table>
          <el-pagination v-if='treatedOrderData.elements.length>0'
                         @current-change="loadData"
                         :current-page="treatedOrderData.page"
                         :page-size="treatedOrderData.size"
                         layout="total, prev, pager, next"
                         :total="treatedOrderData.totalAmount">
          </el-pagination>
        </div>
        <MkAssessDetail :showDialog='dialogVisible' :id='id' v-on:closeDialog='closeDialog' :type="type"></MkAssessDetail>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../components/MkBreadcrumb.vue'
  import assessService from './../../services/assess'
  import MkAssessDetail from './MkAssessDetail.vue'
  import { mapState } from 'vuex'
  export default {
    name: 'MkAssessList',
    components:{
      MkBreadcrumb,MkAssessDetail
    },
    computed: mapState({
      bodyHeight: state=> state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
      shopList (state) {
        this.$set(this.formArr,1,{
          formLabel:'店铺名称',
          searchName:'sellerId',
          dataType:'string',
          componentType:'Select',
          optionsArr: state.access.shop
        })
      }
    }),
    mounted: function() {
      this.loadSite();
//      this.loadShop();
      this.$store.dispatch('loadShopServer').then(()=>{
        return this.shopList
      });
    },
    activated(){
      this.loadData(1);
    },
    methods: {
      fun_call_search(search,input) {
        this.searchCondition.siteId = search.siteArr[search.siteArr.length - 1];
        this.searchCondition.sellerId = search.sellerId;
        this.searchCondition.score = search.score;
        this.searchCondition.search = input;

        this.loadData(1);
      },
      loadData(page) {
        if(page) {
            this.searchCondition['page.pn'] = page;
        }
        this.loadingTab = true;
        assessService.loadAssessList(this.searchCondition, (data) => {
            this.treatedOrderData = data.data;
            this.loadingTab = false;
          })
      },
      loadDetail() {
        this.loadingTab = true;
        assessService.loadAssessList(this.searchCondition, (data) => {
          this.treatedOrderData = data.data;
          console.log(this.treatedOrderData);
          this.loadingTab = false;
        })
      },
      formatDate(row, column, cellValue){
        return new Date(cellValue).pattern("yyyy-MM-dd HH:mm")
      },
      loadSite() {
        this.$store.dispatch('loadSiteTree',{fields:'id,name'}).then(data =>{
          let arr = [{id:'',name:'全部'}];
          if(data.data.children){
            for(var i=0;i<data.data.children.length;i++) {
              let item = data.data.children[i];
              if(item.children && item.children.length>0) {
                arr.push(item);
              }
            }
          }
          this.$set(this.formArr,0,{
            formLabel:'站点',
            searchName:'siteArr',
            dataType:'array',
            componentType:'Cascader',
            changeOnSelect:false,
            optionsArr:arr ,
            defaultProps:{
              label:'name',
              value: 'id',
              children: 'children'
            }
          })
        });
      },
      loadShop(){},

      closeDialog(type){
        this.dialogVisible = false;
        if(type) {
          this.loadData();
        }
      },
      showDetail(row, event, column){
      	this.id=row.id;
      	this.dialogVisible=true;
      },
    },
    data () {
      return {
        formArr:[],
        loadingTab: false,
        searchCondition: {
          'page.pn': 1,
          'page.size': 10,
          score:'',
          search:'',
          sellerId:'',
          siteId:''
        },
        treatedOrderData: {
          elements: [
          ],
          page: '',
          size: '',
          totalPages: '',
          totalAmount: ''
        },
        breadcrumbData:{
          list: [
            {name:'评价管理',path: null, clickAble: false},
            {name: '商品评价',path: null, clickAble: false},
          ],
          returnData: {
            isReturn: false, path: null
          },
          iconName: 'assess-icon',
        },
        id:'',
        dialogVisible:false,
        type:'assess',
      }
    }
  }
</script>
<style lang="less">
</style>
